<template>
  <div ref="tmpl" class="tmpl" @scroll="onScoll">
    <el-tabs v-model="tabIdx" tab-position="left" class="el-tab" @tab-click="handleTabChange">
      <el-tab-pane label="基本设置" name="1" />
      <el-tab-pane label="价格设置" name="2" />
      <el-tab-pane label="过滤设置" name="3" />
      <el-tab-pane label="标题设置" name="4" />
      <el-tab-pane label="主图设置" name="5" />
      <el-tab-pane label="SKU设置" name="6" />
      <el-tab-pane label="详情设置" name="7" />
      <el-tab-pane label="描述设置" name="8" />
      <el-tab-pane label="属性设置" name="9" />
      <el-tab-pane label="尺码测试" name="10" />
    </el-tabs>
    <el-form
      class="tmpl-form"
      :model="form"
      label-width="150px"
      label-position="left"
    >
      <div class="tmpl-card">
        <div class="tmpl-title jb">基本设置</div>
        <el-form-item label="商品上架：">
          <el-radio-group v-model="form.a">
            <el-radio>立即上架</el-radio>
            <el-radio>不立即上架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发货模式：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否限购：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="扣减库存类型：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="满减扣设置：">
          <span>满两件&ensp;</span>
          <el-input v-model="form.i" class="tmpl-len60" max="9.9" min="5" />&ensp;折
          <span class="tmpl-tip tmpl-ml16">可设置5~9.9</span>
        </el-form-item>
        <el-form-item label="是否二手：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="客服电话：">
          <el-input class="tmpl-len240" placeholder="请输入客服电话" />
        </el-form-item>
        <el-form-item label="定点开售：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="卖点设置：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="短标题：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="退款规则：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
          <el-tooltip
            effect="light"
            content="如果当前类目不支持，则默认第一个"
            placement="right"
            class="tooltip"
            popper-class="light-tooltip-right"
          ><svg-icon icon-class="question" />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="服务承诺：">
          <el-checkbox-group v-model="form.c">
            <el-checkbox label="坏了包退" />
            <el-checkbox label="破损包退" />
            <el-checkbox label="过敏包退" />
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div class="tmpl-card">
        <div class="tmpl-title jg">价格设置</div>
        <el-form-item label="统一价设置">
          <el-row>
            <el-select v-model="form.price_type" class="tmpl-len140">
              <el-option label="劵前价" :value="0" />
              <el-option label="劵后价" :value="1" />
            </el-select>
            <el-select
              v-model="form.price_option"
              class="tmpl-len140 tmpl-mlr8"
            >
              <el-option label="使用来源价格" :value="0" />
              <el-option label="使用倍数价格" :value="1" />
              <el-option label="自定义价格" :value="2" />
            </el-select>
            <template v-if="form.price_option === 2">
              <el-input
                v-model="form.custom_price"
                class="margin-left"
                style="width: 80px"
                min="0"
              />&emsp;元
            </template>
            <template>
              <span class="margin-left">原价×&emsp;</span>
              <el-input
                v-model="form.price_multiple"
                class="margin-left"
                style="width: 60px"
                min="0"
              />&emsp;倍&emsp;+&emsp;
              <el-input
                v-model="form.price_add"
                class="margin-left"
                style="width: 60px"
                min="0"
              />&emsp;元
              <span class="tmpl-ml16">保留小数点&emsp;</span>
              <el-input
                v-model="form.decimal_handle"
                class="margin-left"
                style="width: 60px"
                min="0"
              >
                <template slot="append">位</template>
              </el-input>
            </template>
          </el-row>
        </el-form-item>
        <el-form-item label="库存设置:">
          <el-radio-group v-model="form.stock_type">
            <el-radio :label="0">使用来源商品库存</el-radio>
            <el-radio :label="1">自定义库存</el-radio>
          </el-radio-group>
          <template v-if="form.stock_type === 1">
            <el-input
              v-model="form.custom_price"
              class="margin-left"
              style="width: 80px"
              min="0"
            />
            <span class="margin-left">件</span>
          </template>
        </el-form-item>
        <el-form-item label="当库存低于：">
          <el-input
            v-model="form.stock_clear"
            class="tmpl-len80"
            min="0"
          />&emsp;时，清空库存
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label" label="最低SKU设置：" />
          <template>
            <span>原价×&emsp;</span>
            <el-input
              v-model="form.price_multiple"
              class="tmpl-len60"
              min="0"
            />&emsp;倍&emsp;+&emsp;
            <el-input
              v-model="form.price_add"
              class="margin-left"
              style="width: 60px"
              min="0"
            />&emsp;元
            <el-checkbox class="tmpl-ml16">
              固定价格&emsp;
              <el-input class="tmpl-len60" />&emsp;元
            </el-checkbox>
          </template>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="form.stock_type">
            <el-radio :label="0">使用来源商品库存</el-radio>
            <el-radio :label="1">自定义库存</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="运费设置:">
          <el-radio-group v-model="form.is_custom_freight">
            <el-radio :label="false">使用来源运费</el-radio>
            <el-radio :label="true">自定义运费</el-radio>
          </el-radio-group>
          <template v-if="form.is_custom_freight">
            <el-input
              v-model="form.custom_freight"
              class="margin-left"
              style="width: 80px"
              min="0"
            />
            <span class="margin-left">元</span>
          </template>
          <el-tooltip
            effect="light"
            content="使用来源运费是取商品运费均价，需注意商品运费导致铺货价格变高"
            placement="right"
            class="tooltip"
            popper-class="light-tooltip-right"
          ><svg-icon icon-class="question" />
          </el-tooltip>
        </el-form-item>
      </div>
      <div class="tmpl-card">
        <div class="tmpl-title jg">过滤设置</div>
        <el-form-item label-width="400px">
          <el-checkbox slot="label" class="tmpl-label">
            禁用所有过滤条件
            <el-tooltip
              effect="light"
              content="勾选后，所有过滤设置将失效"
              placement="right"
              class="tooltip"
              popper-class="light-tooltip-right"
            ><svg-icon icon-class="question" @click.prevent.stop />
            </el-tooltip>
          </el-checkbox>
        </el-form-item>
        <el-form-item label="商品过滤：">
          <el-checkbox-group v-model="form.c">
            <el-checkbox label="过滤已复制的商品" />
            <el-checkbox label="过滤无描述商品" />
            <el-checkbox label="过滤非包邮商品" />
            <el-checkbox label="过滤预售商品" />
            <el-checkbox label="过滤折扣商品" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">
            库存过滤：
          </el-checkbox>
          <template>
            过滤库存小于&emsp;<el-input class="tmpl-len80" />&emsp;元的商品
            <el-tooltip
              effect="light"
              content="过滤总库存小于指定数量的商品，针对淘宝、天猫、1688，快手有效【京东无效】"
              placement="right"
              class="tooltip"
              popper-class="light-tooltip-right"
            ><svg-icon icon-class="question" />
            </el-tooltip>
          </template>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">
            运费过滤：
          </el-checkbox>
          <template>
            过滤运费大于&emsp;<el-input class="tmpl-len80" />&emsp;元的商品
            <el-tooltip
              effect="light"
              content="过滤总库存小于指定数量的商品，针对淘宝、天猫、1688，快手有效【京东无效】"
              placement="right"
              class="tooltip"
              popper-class="light-tooltip-right"
            ><svg-icon icon-class="question" />
            </el-tooltip>
          </template>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">
            价格过滤：
          </el-checkbox>
          <template>
            只复制价格在&emsp;
            <el-input class="tmpl-len80" />
            &emsp;-&emsp;
            <el-input class="tmpl-len80" />
            &emsp;的商品，过滤其他
            <el-tooltip
              effect="light"
              placement="right"
              class="tooltip"
              popper-class="light-tooltip-right"
            >
              <span slot="content">设置按价格区间过滤：如果“价格设置”选择按“原价”复制，则按照“原价”进行过滤；<br> 如果“价格设置”选择按“促销价”复制，则按照“促销价”过滤。<br> 多sku商品需要所有的sku价格都在区间内才会复制。</span>
              <svg-icon icon-class="question" />
            </el-tooltip>
          </template>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">
            品牌关键字过滤：
          </el-checkbox>
          <el-row type="flex">
            <el-input
              type="textarea"
              :rows="3"
              clearable
              resize="none"
              placeholder="多个关键字用回车或者英文逗号分隔"
            />
            <div>
              <el-button type="primary" plain style="margin: 0 70px 0 8px;">清空</el-button>
            </div>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">
            SKU关键字跳过:
          </el-checkbox>
          <el-row type="flex">
            <el-input
              type="textarea"
              :rows="3"
              clearable
              resize="none"
              placeholder="多个关键字用回车或者英文逗号分隔"
            />
            <div>
              <el-button type="primary" plain style="margin: 0 70px 0 8px;">清空</el-button>
            </div>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">
            标题关键字过滤：
          </el-checkbox>
          <el-row type="flex">
            <el-input
              type="textarea"
              :rows="3"
              resize="none"
              placeholder="多个关键字用回车或者英文逗号分隔"
            />
            <div>
              <el-button type="primary" plain style="margin: 0 70px 0 8px;">清空</el-button>
            </div>
          </el-row>
        </el-form-item>
      </div>
      <div class="tmpl-card">
        <div class="tmpl-title jg">标题设置</div>
        <el-form-item label="增加前后缀：">
          <el-input class="tmpl-len240" placeholder="输入前缀" />
          <span class="tmpl-mlr8">+ 原标题 +</span>
          <el-input class="tmpl-len240" placeholder="输入后缀" />
        </el-form-item>
        <el-form-item label="标题优化：">
          当标题超过字符限制时
          <el-select v-model="form.region" class="tmpl-len140">
            <el-option label="删除最后面" value="shanghai" />
            <el-option label="删除最前面" value="beijing" />
          </el-select>
          的字符
        </el-form-item>
        <el-form-item label="替换关键字:">
          <el-checkbox-group v-model="form.c">
            <el-row>
              <el-checkbox>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <span class="tmpl-mlr8">替换为<svg-icon icon-class="array-right" /></span>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <i class="el-icon-remove-outline tmpl-icon-add" />
              </el-checkbox>
            </el-row>
            <el-row>
              <el-checkbox>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <span class="tmpl-mlr8">替换为<svg-icon icon-class="array-right" /></span>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <i class="el-icon-remove-outline tmpl-icon-rm" />
              </el-checkbox>
            </el-row>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">
            删除关键词：
          </el-checkbox>
          <el-row type="flex">
            <el-input
              type="textarea"
              :rows="3"
              resize="none"
              placeholder="多个关键字用回车或者英文逗号分隔"
            />
            <div>
              <el-button type="primary" plain style="margin: 0 70px 0 8px;">清空</el-button>
            </div>
          </el-row>
        </el-form-item>
      </div>
      <div class="tmpl-card">
        <div class="tmpl-title jg">主图设置</div>
        <el-form-item label-width="0">
          <el-checkbox-group v-model="form.c">
            <el-checkbox>
              <span class="tmpl-label-width">删除主图前：</span>
              <el-input class="tmpl-len80" />&emsp;张
            </el-checkbox>
            <el-checkbox>删除主图后：<el-input class="tmpl-len80" />&emsp;张</el-checkbox>
            <el-checkbox>删除主图第：<el-input class="tmpl-len240" placeholder="多个用英文逗号隔开，如 1,3,8" />&emsp;张</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="首图设置">
          <el-checkbox>使用SKU第一张图替换商品主图首图</el-checkbox>
          <el-checkbox>
            随机打乱主图顺序
            <el-select v-model="form.region" class="tmpl-len140">
              <el-option label="首图位置不变" value="shanghai" />
              <el-option label="首图位置变化" value="beijing" />
            </el-select>
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">插入主图前：</el-checkbox>
          <el-upload
            :limit="3"
          >
            <div class="tmpl-upload">
              <i class="el-icon-plus" />
              <div>添加</div>
            </div>
          </el-upload>
          <span class="tmpl-tip">最多添加五张</span>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">插入主图后：</el-checkbox>
          <el-upload
            :limit="3"
          >
            <div class="tmpl-upload">
              <i class="el-icon-plus" />
              <div>添加</div>
            </div>
          </el-upload>
          <span class="tmpl-tip">最多添加五张</span>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">主图主动填满：</el-checkbox>
          <el-checkbox>优先使用SKU图填充</el-checkbox>
        </el-form-item>
      </div>
      <div class="tmpl-card">
        <div class="tmpl-title jg">SKU设置</div>
        <el-form-item label="SKU别名设置：">
          <el-radio-group>
            <el-radio>包含关键字替换</el-radio>
            <el-radio>完全一样替换</el-radio>
          </el-radio-group>
          <div class="tmpl-tip tmpl-mlr8">注：包含关键词替换表示SKU别名里有指定的关键词时进行替换，完全一样替换表示SKU别名和指定关键词完全一致时替换</div>
        </el-form-item>
        <el-form-item>
          <el-checkbox-group v-model="form.c">
            <el-row>
              <el-checkbox>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <span class="tmpl-mlr8">替换为<svg-icon icon-class="array-right" /></span>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <i class="el-icon-remove-outline tmpl-icon-rm" />
              </el-checkbox>
            </el-row>
            <el-row>
              <el-checkbox>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <span class="tmpl-mlr8">替换为<svg-icon icon-class="array-right" /></span>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <i class="el-icon-remove-outline tmpl-icon-rm" />
              </el-checkbox>
            </el-row>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">
            SKU关键字删除：
          </el-checkbox>
          <el-row type="flex">
            <el-input
              type="textarea"
              :rows="3"
              resize="none"
              placeholder="多个关键字用回车或者英文逗号分隔"
            />
            <div>
              <el-button type="primary" plain style="margin: 0 70px 0 8px;">清空</el-button>
            </div>
          </el-row>
        </el-form-item>
        <el-form-item label="SKU长度设置：">
          当SKU别名长度超出时
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="切断后面的超长关键词" value="shanghai" />
            <el-option label="切断前面的超长关键词" value="beijing" />
            <el-option label="不复制此商品" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="SKU规格异常处理：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="不处理" value="shanghai" />
            <el-option label="多规格合一" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">
            其他设置：
          </el-checkbox>
          <el-row class="tmpl-tip">当SKU包含指定关键字，库存清零</el-row>
          <el-row type="flex">
            <el-input
              type="textarea"
              :rows="3"
              resize="none"
              placeholder="多个关键字用回车或者英文逗号分隔"
            />
            <div>
              <el-button type="primary" plain style="margin: 0 70px 0 8px;">清空</el-button>
            </div>
          </el-row>
        </el-form-item>
      </div>
      <div class="tmpl-card">
        <div class="tmpl-title jg">详情设置</div>
        <el-form-item label="详情图来源：">
          <el-radio-group>
            <el-radio>使用详情图</el-radio>
            <el-radio>使用商品主图</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="详情为空处理：">
          <el-radio-group>
            <el-radio>使用商品主图</el-radio>
            <el-radio>使用SKU首图</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="详情图片">
          <el-row class="tmpl-mb12">
            <el-checkbox>删除主图前:&emsp;<el-input class="tmpl-len80" />&emsp;张</el-checkbox>
            <el-checkbox>删除主图后:&emsp;<el-input class="tmpl-len80" />&emsp;张</el-checkbox>
          </el-row>
          <el-row class="tmpl-mb12">
            <el-checkbox>
              删除详情图第:&emsp;
              <el-input class="tmpl-len240" placeholder="多个用英文逗号隔开，如 1,3,8" />&emsp;张
            </el-checkbox>
            <span class="tmpl-tip tmpl-mlr8">提示：用于过滤文字广告图片</span>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">插入详情图前：</el-checkbox>
          <el-row>
            <el-upload
              :limit="3"
            >
              <div class="tmpl-upload">
                <i class="el-icon-plus" />
                <div>添加</div>
              </div>
            </el-upload>
            <span class="tmpl-tip">最多添加10张</span>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">插入详情图后：</el-checkbox>
          <el-row>
            <el-upload
              :limit="3"
            >
              <div class="tmpl-upload">
                <i class="el-icon-plus" />
                <div>添加</div>
              </div>
            </el-upload>
            <span class="tmpl-tip">最多添加10张</span>
          </el-row>
        </el-form-item>
      </div>
      <div class="tmpl-card">
        <div class="tmpl-title jg">描述设置</div>
        <el-form-item label="描述来源：">
          <el-radio-group>
            <el-radio>使用来源描述文本</el-radio>
            <el-radio>使用标题属性</el-radio>
            <el-radio>自定义</el-radio>
          </el-radio-group>
          <el-checkbox class="tmpl-ml16">来源描述文本为空时使用自定义</el-checkbox>
        </el-form-item>
        <el-form-item label="自定义描述">
          <el-input
            type="textarea"
            :rows="3"
            resize="none"
            placeholder="多个关键字用回车或者英文逗号分隔"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox slot="label" class="tmpl-label">替换关键字：</el-checkbox>
          <el-checkbox-group v-model="form.c">
            <el-row class="tmpl-mb12">
              <el-checkbox>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <span class="tmpl-mlr8">替换为<svg-icon icon-class="array-right" /></span>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <i class="el-icon-remove-outline tmpl-icon-rm" />
              </el-checkbox>
            </el-row>
            <el-row class="tmpl-mb12">
              <el-checkbox>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <span class="tmpl-mlr8">替换为<svg-icon icon-class="array-right" /></span>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <i class="el-icon-remove-outline tmpl-icon-rm" />
              </el-checkbox>
            </el-row>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div class="tmpl-card">
        <div class="tmpl-title jg">属性设置</div>
        <el-form-item label="不存在必填属性：">
          <el-select v-model="form.region">
            <el-option label="填充第一个" value="shanghai" />
            <el-option label="填充最后一个" value="beijing" />
            <el-option label="不填充" value="beijing" />
          </el-select>
          <el-checkbox class="tmpl-ml16">优先填充其他</el-checkbox>
        </el-form-item>
        <el-form-item label="不存在非必填属性：">
          <el-select v-model="form.region">
            <el-option label="不填充" value="beijing" />
            <el-option label="填充第一个" value="shanghai" />
            <el-option label="填充最后一个" value="beijing" />
          </el-select>
          <el-checkbox class="tmpl-ml16">优先填充其他</el-checkbox>
        </el-form-item>
        <el-form-item label="品牌预设：">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="智能匹配" value="beijing" />
            <el-option label="手动输入品牌" value="shanghai" />
          </el-select>
          <el-input class="tmpl-len240 tmpl-mlr8" />
        </el-form-item>
        <el-form-item label="属性预设：">
          <el-row class="tmpl-tip">
            强制预设：勾选后，强制预设该属性；不勾选，若来源商品的该属性有值，则不修改，若该属性无值，则预设该属性
          </el-row>
          <el-checkbox-group v-model="form.c">
            <el-row class="tmpl-mb12">
              <el-checkbox>
                <el-input class="tmpl-len140" placeholder="输入属性名称" />
                <span class="tmpl-mlr8">:</span>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <i class="el-icon-circle-plus-outline tmpl-icon-add" />
              </el-checkbox>
              <el-checkbox>强制预设</el-checkbox>
            </el-row>
            <el-row class="tmpl-mb12">
              <el-checkbox>
                <el-input class="tmpl-len140" placeholder="输入属性名称" />
                <span class="tmpl-mlr8">:</span>
                <el-input class="tmpl-len240" placeholder="输入内容" />
                <i class="el-icon-remove-outline tmpl-icon-rm" />
              </el-checkbox>
              <el-checkbox>强制预设</el-checkbox>
            </el-row>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="属性映射：">
          <el-checkbox-group v-model="form.c">
            <el-row class="tmpl-mb12">
              <el-checkbox>
                <el-input class="tmpl-len240" placeholder="生产许可证号" />
                <span class="tmpl-mlr8">替换为<svg-icon icon-class="array-right" /></span>
                <el-input class="tmpl-len240" placeholder="许可证编号" />
                <i class="el-icon-circle-plus-outline tmpl-icon-add" />
              </el-checkbox>
            </el-row>
            <el-row class="tmpl-mb12">
              <el-checkbox>
                <el-input class="tmpl-len240" placeholder="生产许可证号" />
                <span class="tmpl-mlr8">替换为<svg-icon icon-class="array-right" /></span>
                <el-input class="tmpl-len240" placeholder="许可证编号" />
                <i class="el-icon-remove-outline tmpl-icon-rm" />
              </el-checkbox>
            </el-row>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div class="tmpl-card">
        <div class="tmpl-title jg">尺码设置</div>
        <el-form-item label="服装类">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="不处理" value="shanghai" />
            <el-option label="多规格合一" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="尺码表来源">
          <el-select v-model="form.region" class="tmpl-len240">
            <el-option label="优先使用来源尺码表" value="shanghai" />
            <el-option label="仅使用来源尺码表" value="shanghai" />
            <el-option label="仅使用配置尺码表" value="shanghai" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'

export default {
  components: {

  },
  data() {
    return {
      form: { c: [], d: [] },
      tabIdx: '1',
      scrollStatus: false
    }
  },
  watch: {
    tabIdx(newVal) {
      if (this.scrollStatus) {
        return
      }
      const tmpl = this.$refs.tmpl
      const card = tmpl.querySelectorAll('.tmpl-card')
      const offsetArr = [...card].map(v => v.offsetTop - 55)
      tmpl.scrollTop = offsetArr[newVal - 1]
      this.scrollStatus = true
      setTimeout(() => {
        this.scrollStatus = false
      }, 200)
    }
  },
  methods: {
    onScoll: debounce(function() {
      if (this.scrollStatus) {
        return
      }
      const tmpl = this.$refs.tmpl
      const card = tmpl.querySelectorAll('.tmpl-card')
      const offsetArr = [...card].map(v => v.offsetTop - 55)
      const st = tmpl.scrollTop
      const idx = offsetArr.findIndex(v => v > st)
      if (idx === -1) {
        this.tabIdx = '' + offsetArr.length
      } else if (idx === 0) {
        this.tabIdx = '1'
      } else {
        this.tabIdx = '' + idx
      }
      this.scrollStatus = true
      setTimeout(() => {
        this.scrollStatus = false
      }, 120)
    }, 120)
  }
}
</script>

<style lang="scss" scoped>
$labelWidth: 150px - 14px - 10px;
.tmpl {
  height: 100%;
  overflow-y: auto;
  background: #F7F8FA;
  .el-tab {
    top: 66px;
    left: 20px;
    position: absolute;
    width: 96px;
    background: #FFFFFF;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
    border-radius: 4px;
  }
  &-card {
    padding: 20px 0 1px 136px;
    background: #FFFFFF;
    border-bottom: 12px solid #F7F8FA;
    .tmpl-title {
      position: relative;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      margin-bottom: 20px;
      padding-left: 10px;
      &::before {
        position: absolute;
        content: '';
        top: 4px;
        left: 0;
        width: 2px;
        height: 12px;
        background: #4E78EF;
        border-radius: 1px;
      }
    }
  }
  &-label {
    font-weight: 700;
  }
  .tooltip {
    margin-left: 12px;
    color: #999999;
  }
  &-label-width {
    width: $labelWidth;
    display: inline-block;
  }
  &-tip {
    font-size: 14px;
    color: #999999;
    // vertical-align: middle;
  }
  &-upload {
    width: 80px;
    height: 80px;
    background: rgba(78, 120, 239, .06);
    border-radius: 8px;
    font-size: 14px;
    color: #4E78EF;
    line-height: 20px;
    .el-icon-plus {
      margin: 14px 0 6px;
      font-size: 20px;
      vertical-align: middle;
    }
  }
  &-len60 {
    width: 60px;
  }
  &-len80 {
    width: 80px;
  }
  &-len140 {
    width: 140px;
  }
  &-len240 {
    width: 240px;
  }
  &-mlr8 {
    margin: 0 8px;
  }
  &-ml16 {
    margin-left: 16px;
  }
  &-mb12 {
    &:not(:last-child) {
      margin-bottom: 12px;
    }
  }
  &-icon-add,
  &-icon-rm {
    font-size: 24px;
    margin-left: 8px;
    color: #4E78EF;
    vertical-align: middle;
  }
  &-icon-rm {
    color: #EE0000;
  }
}
</style>
